<template>
	<view>
		<z-paging :fixed="true" :default-page-size="1000" ref="paging" v-model="list" :auto="false" @query="queryList">
			<view class="word-box">
				<view class="word-box-item word-box-hover d-s-c" :class="'choose' + index" v-for="(item, index) in list"
					:key="index" @tap="wordClick(index)">
					<view class="ww75 d-s-c">
						<wordTip :item="item"></wordTip>
						<view class="f36 fb mr30">{{item.word}}</view>
						<view class="f32 fb mr30" v-if="(currentIndex==index&&clickTimes==2) || item.check">
							{{item.chinese}}</view>
					</view>
					<view class="ww25 d-e-c">
						<view class="word-box-item-check presdete_top_item_box1 d-c-c mr20"
							:class="{'checked':item.check==1}" @tap.stop="wordCheck(index, 1)">
							<u-icon name="checkmark" color="#ffffff" size="36"></u-icon>
						</view>
						<view class="word-box-item-check presdete_top_item_box2 d-c-c"
							:class="{'checked':item.check==2}" @tap.stop="wordCheck(index, 2)">
							<u-icon name="close" color="#ffffff" size="36"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="word-operate d-b-c tc" slot="bottom">
				<view class="">
					<view class="f32 fb" style="color: #0B99FE;">{{list.length}}</view>
					<view class="gray9">总数</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #70DA11;">{{yesCount}}</view>
					<view class="gray9">正确</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #FF165D;">{{noCount}}</view>
					<view class="gray9">错误</view>
				</view>
				<view class="word-operate-submit" @tap="submit">提交</view>
			</view>
		</z-paging>
		<reviewFinish v-model="isShow" @continueReview="continueReview" @overStudy="overStudy"></reviewFinish>
	</view>
</template>

<script>
	import wordTip from '@/pages/components/wordTootip.vue'
	import reviewFinish from '@/pages/components/reviewFinish/reviewFinish.vue'
	export default {
		components: {
			wordTip,
			reviewFinish
		},
		data() {
			return {
				isShow: false,
				list: [],
				yesCount: 0,
				yesIds: '',
				noCount: 0,
				noIds: '',
				currentIndex: -1,
				clickTimes: 0,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			} else {
				setTimeout(() => {
					this.$refs.paging.reload()
				}, 100)
			}
		},
		methods: {
			continueReview(){
				
			},
			overStudy(){
				
			},
			queryList(pageNo, pageSize) {
				this.$u.get(this.$u.api.review21, {
					pageNo: pageNo,
					pageSize: pageSize,
					voiceType: this.$store.state.voiceType,
				}).then((res) => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							item.show = false
							item.check = 0
						})
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
				}).catch((res) => {
					this.$refs.paging.complete(false)
				})
			},
			// 点击单词
			wordClick(i) {
				if (this.currentIndex == i) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = i
				// this.list[i].show = true

				let audio = this.list[i].audio_url
				this.playAudio(audio)
			},
			// 发音
			playAudio(audio) {
				if (audio) {
					this.utils.playAudio(audio)
				}
			},
			// 选择单词
			wordCheck(i, n) {
				if (this.list[i].check == n) {
					this.list[i].check = 0
				} else {
					this.list[i].check = n
					if (i < this.list.length - 1) {
						let audio = this.list[i + 1].audio_url
						this.playAudio(audio)
					}
				}
				let count1 = 0
				let count2 = 0
				let idArray1 = []
				let idArray2 = []
				for (let j = 0; j < this.list.length; j++) {
					let words = this.list[j]
					if (words.check == 1) {
						count1 += 1
						idArray1.push(words.id)
					}
					if (words.check == 2) {
						count2 += 1
						idArray2.push(words.id)
					}
				}
				this.yesCount = count1
				this.yesIds = idArray1.join(',')
				this.noCount = count2
				this.noIds = idArray2.join(',')
			},
			// 提交
			submit() {
				if (this.yesIds == '' && this.noIds == '') {
					uni.$u.toast('请先选择单词')
					return false
				}
				if (this.yesCount + this.noCount != this.list.length) {
					uni.$u.toast('还有单词未复习，请检查')
					let nocheck = this.list.filter(item => item.check === 0)
					uni.showModal({
						title: '提示',
						content: `当前还有${nocheck.length}个未复习，请选择继续复习或者强制已复习。强制复习会将当前未复习的变成已复习，请慎重使用。`,
						cancelText: '强制已复习',
						confirmText: '继续复习',
						success: (res) => {
							if (res.confirm) {
								let i = this.list.findIndex(item => !item.check)
								// #ifdef H5
								document.querySelector(`.choose${i}`).scrollIntoView({
									behavior: 'smooth'
								});
								// #endif
							} else if (res.cancel) {

							}
						},

					})

					return false
				}
				this.$u.post(this.$u.api.review21, {
					yesIds: this.yesIds,
					noIds: this.noIds,
				}).then((res) => {
					uni.$u.toast('提交成功')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/study/review21/report?recordId=' + res.data
						});
					}, 2000)
					return false
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.uni-modal {
		.uni-modal__bd {
			font-size: 50rpx !important;
		}
	}
</style>